<template>
	<view class="layui-form-item" v-if="type != 'hidden'">
		<label class="layui-form-label" v-if="title">{{title}}</label>
		<view class="layui-input-block" :style="{'margin-left':title?'140px' :'0'}">
			
			<block v-if="addOn">
				<div class="inputGroup" >
					<div class="inputGroup-addon" v-if="addOnLeft" @tap="tapAddOn">
						{{addOn}}
					</div>
					<input @input="input" @blur="blur" :type="type" :name="name" :value="value" :disabled="disabled" :placeholder="placeholder" autocomplete="off" class="layui-input" :class="{'disabled':disabled}"/>
					<div class="inputGroup-addon" v-if="!addOnLeft"  @tap="tapAddOn">
						{{addOn}}
					</div>
				</div>
			</block>
			<block v-else>
				<input  @input="input" @blur="blur" :type="type" :name="name" :value="value" :disabled="disabled" :placeholder="placeholder" autocomplete="off" class="layui-input" :class="{'disabled':disabled}"/>
			</block>
			
			<input type="text" :name="name" :value="hiddenValue" style="display: none;" v-if="hiddenValue">
			
		</view>
	</view>
	<input type="text" :name="name" :value="value" style="display: none;" v-else>
</template>

<script>
	export default {
		name : "inputGroup" ,
		props:{
			title : {
				default : ""
			},
			name : {
				default : ""
			},
			value : {
				default : ""
			},
			hiddenValue : {
				default : ""
			},
			placeholder : {
				default : ""
			},
			type : {
				default : "text"
			},
			disabled : {
				default : false
			},
			addOn : {
				default : ""
			},
			addOnLeft : {
				default : false
			}
		},
		created() {
			if (!this.value && this.value != false && this.value != 0 ) {
				this.value = "" ;
			}
			if(!!this.hiddenValue){
				this.disabled = true ;
			}
		},
		watch:{
			value : function(e){
				console.log(this.value,"this.value")
				if (!this.value && this.value != false && this.value != 0 ) {
					this.value = "" ;
				}
			},
			hiddenValue:function(res){
				if(!!this.hiddenValue){
					this.disabled = true ;
				}
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			input:function(e){
				this.$emit("input" , e);
			},
			blur:function(e){
				this.$emit("blur" , e);
			},
			tapAddOn:function(e){
				this.$emit("tapAddOn",e);
			},
		}
	}
</script>

<style>
.layui-input.disabled{
	background-color: #f1f1f1;
}
</style>
